<script setup>
import { ref } from 'vue';
import { useFormOperate } from '@/hooks/pages-repeat';
import { createApi, updataApi, getInfoApi } from '@/api/sys/dict-type.js';

const emits = defineEmits(['modalClose'])
const { 
  dataFormRef,
  modalOpen,
  confirmLoading,
  detailLoading,
  dataForm,
  requestObj,
  submit,
  init
} = useFormOperate()

requestObj.value = {
  createApi,
  updataApi,
  getInfoApi,
  submitCallback: emits
}

dataForm.value = {
  id: undefined,
  dictName: '',
  dictType: '',
  sort: 0,
  remark: ''
}

const rules = ref({
  dictName: [{ required: true, message: '请输入字典名称!' }],
  dictType: [{ required: true, message: '请输入字典类型!' }],
  sort: [{ required: true, message: '请选中排序!' }],
})

defineExpose({
  init
})

</script>

<template>
  <a-modal 
    width="40%"
    v-model:open="modalOpen" 
    :confirm-loading="confirmLoading"
    :title="dataForm.id ? '修改字典类型' : '新增字典类型'" 
    okText="确定"
    cancelText="取消"
    :maskClosable="false"
    :bodyStyle="{'padding': '20px'}"
    @cancel="emits('modalClose')"
    @ok="submit"
    >
    <a-spin :spinning="detailLoading">
      <a-form ref="dataFormRef" layout="vertical" :model="dataForm" :rules="rules" name="dataForm" autocomplete="off">
        <a-form-item label="字典名称" name="dictName">
          <a-input v-model:value.trim="dataForm.dictName" placeholder="请输入字典名称" />
        </a-form-item>

        <a-form-item  label="字典类型" name="dictType">
          <a-input v-model:value.trim="dataForm.dictType" placeholder="请输入字典类型" />
        </a-form-item>

        <a-form-item label="排序" name="sort">
          <a-input-number style="width: 100%;" id="inputNumber" v-model:value.trim="dataForm.sort" :min="0"/>
        </a-form-item>

        <a-form-item  label="备注">
          <a-input v-model:value.trim="dataForm.remark" placeholder="请输入备注" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<style lang="scss" scoped>

</style>